<template>
  <div class="container">
    <section>
      <div class='u-title'>
        <h2>筛选查询</h2>
      </div>
      <div class='u-content u-filter f-ptp10'>
        <div class='u-filter-item'>
          <label for="">公告标题：</label>
          <el-input class='f-w200' v-model="title" placeholder="标题关键字"></el-input>
        </div>
        <div class='u-filter-item'>
          <label for="">发布时间：</label>
          <el-date-picker
            class='f-mrt20 date'
            v-model="date"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </div>
        <el-button class='f-h40 f-mbt10' @click="getList" type="primary">查询</el-button>
      </div>
    </section>
    <div class='f-mtp20'>
      <div class='u-title'>
        <h2>公告列表</h2>
        <router-link class='u-title-btn' to='/home/addNotice'>发布公告</router-link>
      </div>
      <el-table
        :data="noticeList"
        border
        style="width: 100%">
        <el-table-column prop="id" label="编号" width="180"></el-table-column>
        <el-table-column prop="title" label="标题" width="180"></el-table-column>
        <el-table-column prop="picUrl" label="封面图片" width="180">
          <template slot-scope="scope">
            <img class='img-cover' :src="scope.row.picUrl" alt="">
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="发布时间" width="180">
          <template slot-scope="scope">
            <span>{{tranDate(scope.row.createTime)}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="manage" label="操作">
          <template slot-scope="scope">
            <router-link  class='s-c-green f-csp f-mrt10' :to='"/home/editNotice/" + scope.row.id'>编辑</router-link>
            <span class='s-c-red f-csp f-mrt10' @click="deleteBtnClickEvent(scope.row)">删除</span>
          </template>
        </el-table-column>
      </el-table>
      <div class='f-ptp20 f-pbt20'>
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          background
          :total="totalCount">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'NoticeManage',
  data() {
    return {
      title:'',
      date: '',
      totalCount: 0,
      currentPage: 1,
      pageSize: 10,
      noticeList: []
    }
  },
  created() {
    this.getList();
  },
  methods: {
    // 日期转换
    tranDate(date) {
      return this._utils.format(date, 'yyyy-mm-dd');
    },

    // 删除按钮点击事件
    deleteBtnClickEvent(row) {
      this.$confirm('确定删除该条公告？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteById(row.id, row.title)
      })
    },

    // 删除
    deleteById(noticeId, title) {
      this.$store.dispatch('HANDLE_NOTICE', {
        id: noticeId,
        state: 'deleted',
        title: title
      }).then(res => {
        if(res.data.retCode == 0) {
          this.$message.success('删除成功！');
          this.getList();
        } else {
          res.data.errorMsg && this.$message.warning(res.data.errorMsg);
        }
      })
    },

    // 获取公告列表
    getList() {
      console.log('data::', this.date);
      let startDay = '';
      let endDay = '';
      if(this._utils.getType(this.date) == 'Array') {
        startDay = this._utils.format(this.date[0], 'yyyy-mm-dd');
        endDay = this._utils.format(this.date[1], 'yyyy-mm-dd');
      }
      this.$store.dispatch('GET_NOTICE_LIST', {
        pageNum: this.currentPage - 1,
        pageSize: this.pageSize,
        title: this.title,
        startDay,
        endDay,
      }).then(res => {
        if(res.data.retCode == 0) {
          this.noticeList = res.data.data;
          this.totalCount = res.data.totalCount;
        }
      })
    },

    // 分页组件回调函数
    handleCurrentChange(page) {
      this.currentPage = page;
      this.getList();
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.img-cover{
  height: 30px;
  max-width: 90px;
}
.top{
  /* display: flex; */
  overflow: hidden;
  padding: 10px 0;
}
.top-item{
  float: left;
  margin-right: 20px;
}
.w-120{
  width: 120px;
}
.w-200{
  width: 200px;
}
</style>
